<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <!-- 重新修改css -->
        <link rel="stylesheet" href="{{ asset("/custom-templates/css/reset.css") }}" rel="stylesheet" type="text/css"/>
        <!-- area0-5的模板样式 -->
        <link rel="stylesheet" href="{{ asset("/custom-templates/css/area.css") }}" rel="stylesheet" type="text/css"/>
        <!-- bootstrap -->
        <link rel="stylesheet" href="{{ asset("/custom-templates/plugins/bootstrap/bootstrap.min.css") }}" rel="stylesheet" type="text/css"/>
        <!-- font-awesome -->
        <link rel="stylesheet" href="{{ asset("/packages/admin/font-awesome/css/font-awesome.min.css") }}" rel="stylesheet" type="text/css"/>
        <!-- <link rel="stylesheet" href="{{ asset("/packages/admin/layer/skin/default/layer.css") }}" rel="stylesheet" type="text/css"/> -->
        <!-- select2 -->
        <!-- <link rel="stylesheet" href="{{ asset("/custom-templates/plugins/select2/css/select2.min.css") }}" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="{{ asset("/custom-templates/plugins/select2/css/s2-docs.css") }}" rel="stylesheet" type="text/css"/> -->
        <!-- bootstrap-datetimepicker -->
        <!-- <link rel="stylesheet" href="{{ asset("/custom-templates/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css") }}" rel="stylesheet" type="text/css"/> -->
        <!-- datatables -->
        <link href="{{ asset("/custom-templates/datatables/css/css3/animate.css") }}" rel="stylesheet" type="text/css"/>
        <link href="{{ asset("/custom-templates/datatables/css/fonts.css") }}" rel="stylesheet" type="text/css"/>
        <link href="{{ asset("/custom-templates/datatables/css/icons.css") }}" rel="stylesheet" type="text/css"/>
        <link href="{{ asset("/custom-templates/datatables/css/admin/style.css") }}" rel="stylesheet" type="text/css"/>
        <link href="{{ asset("/custom-templates/datatables/css/admin/jquery.dataTables.css") }}" rel="stylesheet" type="text/css"/>
        <!-- 引入p0的css -->
        <link rel="stylesheet" href="{{ asset("/custom-templates/css/biz/p0.css") }}" />

        

    </head>
    <body>
    <form method="post" enctype="multipart/form-data" name="chat_form" id="chat_form" style="display:none;">
<input name="impic_upload" type="file" id="impic_upload" />
</form>
    <div class="shandowMark" style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:1000;background:#f3f3f4;">
    </div>
        <!-- 模板容器 -->
        <div>
            <h2 style="margin:0 auto;width:1200px;margin-top:30px;">
                首页模板
            </h2>
        </div>
        <!-- 初始化模板区域 -->
        <div id="custom-template-wrap" class="clearfix" style="margin-top:5px;">
        </div>
        <div class="ibox-title" style="background:none;">
        <a class="btn btn-default btn-sm table-back-btn" style="">
            <i class="fa fa-arrow-left">
            </i>
            返回
        </a>
       
        </div>
        <!-- 详情 -->
        <div class="row col-lg-12 nowAreaDetail animated fadeInUp">
            <div class="wrapper">
                <div class="ibox-title">
                    <h5>
                    </h5>
                    <button class="btn btn-sm btn-primary pull-right detailChangeBtn" type="button">
                        更改
                    </button>
                </div>
                <div class="ibox-content">
                    <table cellspacing="0" class="table table-striped table-bordered table-hover areaDetail" id="table_detail">
                       
                    </table>
                </div>
            </div>
        </div>
        <!-- table start -->
        
        <!-- table_livebox 直播 -->
        <div class="row col-lg-12 table-itemSelsbox table-item1" id="table_livebox">
            <div class="wrapper wrapper-content">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>
                            直播
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="selectListTop">
                                <div class="from-group pull-left" style="">
                                    <label class="pull-left control-label" style="line-height: 30px;">
                                        归类：
                                    </label>
                                    <div class="pull-left">
                                        <select class="input-sm form-control input-s-sm inline" id="table-live-search1">
                                           <option value="">
                                                请选择
                                            </option>
                                            
                                            @foreach($vccats as $vcat)
                                                <option value="{{ $vcat->id }}">{{ $vcat->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="from-group pull-left" style="">
                                    <label class="pull-left control-label" style="line-height: 30px;">
                                        分类：
                                    </label>
                                    <div class="pull-left">
                                        <select class="input-sm form-control input-s-sm inline" id="table-live-search2">
                                           <option value="">
                                                请选择
                                            </option>
                                            @foreach ($vccattags as $vcattag)
                                                <option value="{{ $vcattag->id }}">{{ $vcattag->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="from-group pull-left">
                                    <input class="input-sm form-control" id="table-live-search-inp" placeholder="请输入关键字" type="text">
                                </div>
                                <div class="from-group pull-left">
                                     <button class="btn btn-sm btn-primary tables-select-search" type="button">
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group pull-left">
                            <button class="btn btn-success btn-sm refreshbtn" href="javascript:void(0);" onclick="runRefresh('1')">
                                <i class="im-spinner10 fa-spin">
                                </i>
                                刷新
                            </button>
                            <button class="btn btn-sm btn-primary savebtn" type="button">
                                <i class="fa fa-check savebtn"></i>提交
                            </button>
                            </div>
                            
                        </div>
                        <table cellspacing="0" class="table table-striped table-bordered table-hover dataTable" id="table_live" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
         <!-- table_pointbox 点播 -->
        <div class="row col-lg-12 table-itemSelsbox table-item4" id="table_pointbox">
            <div class="wrapper wrapper-content">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>
                            点播
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="selectListTop">
                                <div class="from-group pull-left" style="">
                                    <label class="pull-left control-label" style="line-height: 30px;">
                                        归类：
                                    </label>
                                    <div class="pull-left">
                                        <select class="input-sm form-control input-s-sm inline" id="table-point-search2">
                                           <option value="">
                                                请选择
                                            </option>
                                            @foreach ($vcattags as $vcattag)
                                                <option value="{{ $vcattag->id }}">{{ $vcattag->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="from-group pull-left">
                                    <label class="pull-left control-label" style="line-height: 30px;">
                                        分类：
                                    </label>
                                    <div class="pull-left">
                                        <select class="input-sm form-control input-s-sm inline" id="table-point-search2">
                                           <option value="">
                                                请选择
                                            </option>
                                            @foreach ($vcattags as $vcattag)
                                                <option value="{{ $vcattag->id }}">{{ $vcattag->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="from-group pull-left">
                                    <input class="input-sm form-control" id="table-point-search-inp" placeholder="请输入关键字" type="text">
                                </div>
                                <div class="from-group pull-left">
                                     <button class="btn btn-sm btn-primary tables-select-search" type="button">
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group pull-left">
                            <button class="btn btn-success btn-sm refreshbtn" href="javascript:void(0);" id="" onclick="runRefresh('4')">
                                <i class="im-spinner10 fa-spin">
                                </i>
                                刷新
                            </button>
                            <button class="btn btn-sm btn-primary savebtn" type="button">
                                <i class="fa fa-check savebtn"></i>保存
                            </button>
                            </div>
                            
                        </div>
                        <table cellspacing="0" class="table table-striped table-bordered table-hover dataTable" id="table_point" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- table_collistbox 栏目列表 -->
        <div class="row col-lg-12 table-itemSelsbox table-item5" id="table_collistbox">
            <div class="wrapper wrapper-content">
                <div class="ibox">
                    <div class="ibox-title clearfix">
                        <h5>
                            栏目列表
                        </h5>
                    </div>

                    <div class="ibox-content">
                        <div class="row">
                            <div class="selectListTop">
                                <div class="from-group pull-left">
                                    <input class="input-sm form-control" id="table-collist-search-inp" placeholder="请输入关键字" type="text">
                                </div>
                                <div class="from-group pull-left">
                                     <button class="btn btn-sm btn-primary tables-select-search" type="button">
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group pull-left">
                            <button class="btn btn-success btn-sm refreshbtn" href="javascript:void(0);" onclick="runRefresh('5')">
                                <i class="im-spinner10 fa-spin">
                                </i>
                                刷新
                            </button>
                            <button class="btn btn-sm btn-primary savebtn" type="button">
                                <i class="fa fa-check savebtn"></i>提交
                            </button>
                            </div>
                           
                        </div>
                        
                        <table cellspacing="0" class="table table-striped table-bordered table-hover dataTable" id="table_collist" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- table_subject 专题列表 -->
        <div class="row col-lg-12 table-itemSelsbox table-item2" id="table_subjectbox">
            <div class="wrapper wrapper-content">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>
                            专题列表
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="selectListTop">
                                <div class="from-group pull-left">
                                    <input class="input-sm form-control" id="table-subject-search-inp" placeholder="请输入关键字" type="text">
                                </div>
                                <div class="from-group pull-left">
                                     <button class="btn btn-sm btn-primary tables-select-search" type="button">
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                       <div class="row">
                           
                               <div class="form-group pull-left">
                                   <button class="btn btn-success btn-sm refreshbtn" href="javascript:void(0);" id="" onclick="runRefresh('2')">
                                       <i class="im-spinner10 fa-spin">
                                       </i>
                                       刷新
                                   </button>
                                   <button class="btn btn-sm btn-primary savebtn" type="button">
                                       <i class="fa fa-check savebtn"></i>提交
                                   </button>
                               </div>
                               
                          
                       </div>
                        <table cellspacing="0" class="table table-striped table-bordered table-hover dataTable" id="table_subject" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- table end -->

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                            <span aria-hidden="true">
                                ×
                            </span>
                        </button>
                        <h3 class="modal-title">
                            关联选择
                        </h3>
                    </div>
                    <div class="modal-body">
                        <p>
                            请选择推荐关联的数据类型
                        </p>
                        <div class="radio-selectbox">
                            <label>
                                <input id="optionsRadios1" name="optionsRadios" type="radio" value="1" checked>
                                    直播媒资
                                </input>
                            </label>
                            <label>
                                <input id="optionsRadios4" name="optionsRadios" type="radio" value="4">
                                    点播媒资
                                </input>
                            </label>
                            <label>
                                <input id="optionsRadios2" name="optionsRadios" type="radio" value="2">
                                    专题
                                </input>
                            </label>
                            <label>
                                <input id="optionsRadios5" name="optionsRadios" type="radio" value="5">
                                    栏目列表
                                </input>
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default removeFocus" data-dismiss="modal" type="button">
                            取消
                        </button>
                        <button class="btn btn-primary" id="arealinkSelBtn" type="button">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- jquery -->
        <script type="text/javascript" src="{{ asset("/custom-templates/plugins/jquery/jquery.min.js") }}"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script type="text/javascript" src="{{ asset("/custom-templates/plugins/bootstrap/bootstrap.min.js") }}"></script>
        <!-- select2 -->
        <!-- <script type="text/javascript" src="{{ asset("/custom-templates/plugins/select2/js/select2.min.js") }}"></script> -->
        <!-- bootstrap-datetimepicker -->
        <!-- <script type="text/javascript" src="{{ asset("/custom-templates/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js") }}"></script> -->
        <!-- store.js -->
        <script type="text/javascript" src="{{ asset("/custom-templates/plugins/store/store.min.js") }}"></script>
        <!-- datatables -->
        <!-- <script src="{{ asset("/custom-templates/datatables/js/jquery.min.js") }}" type="text/javascript"></script> -->
        <!-- <script src="{{ asset("/custom-templates/datatables/js/admin/bootstrap.min.js") }}" type="text/javascript"></script> -->
        <script src="{{ asset("/packages/admin/layer/layer.js") }}" type="text/javascript"></script>
        <script src="{{ asset("/custom-templates/datatables/js/admin/jquery.dataTables.js") }}" type="text/javascript"></script>
        <script src="{{ asset("/custom-templates/datatables/js/admin/dataTables.bootstrap.js") }}" type="text/javascript"></script>
        <script src="{{ asset("/custom-templates/datatables/js/admin/colResizable-1.5.min.js") }}" type="text/javascript"></script>
        <!--  -->
        <script type="text/javascript" src="{{ asset("/custom-templates/plugins/jquery/jquery.form.min.js") }}"></script>

        <script type="text/javascript" src="{{ asset("/custom-templates/js/api/api.js") }}"></script>
        <!-- <script type="text/javascript" src="{{ asset("/custom-templates/js/api/config.js") }}"></script> -->
        <!-- 模板区域渲染的js -->
        <script type="text/javascript" src="{{ asset("/custom-templates/js/commonAreaRender.js") }}"></script>
        <script type="text/javascript" src="{{ asset("/custom-templates/js/biz/area003.js") }}"></script>
        <!-- 通用 -->
      
        <script type="text/javascript">
            
            $(function() {
                resourceArr.home_type = 3;
                initNowPageAreaInfo();
                
               // 防止csrf
               $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                // 填充首页模版1
                fillNowPageArea("/template_type/data/AREA/003/backfill")


                // 是否预览模板
                var onlineStatus = getUrlParam('online_status');
                if(onlineStatus == 1){
                    $('.table-itemSelsbox').hide();
                    $('.uploadPicBtn').hide();
                    return false;
                }

                // 给需要编辑的区域绑定点击事件
                $.each(divs, function(index, item) {
                    
                    $("#" + item).on("click", function(e) {

                        var option = window.OPTIONS[item];
                        
                        // 要选几个视频
                        // $("#video_count").text(option.count);
                        // 记录下现在是编写那块区域的数据
                        store.set('current_area', item);
                        nowAreaPos = item;
                        // 判断是否有活动焦点的类名(高亮标记保持为1个)
                        if($('.activefocus').length!=0){
                            // console.log('tag')
                          $('.activefocus').removeClass('activefocus')
                          stopScrollText()
                        }
                        // 判断是否为指定区域
                        if($(e.target).parent().prop("tagName")=='LI'){
                            tagNo = $(e.target).parent().index()+1;
                            $(this).find('li').eq(tagNo-1).addClass('activefocus');
                             scrollText($('.activefocus')[0])
                        }else if($(e.target).parent().prop("tagName")=='DIV'){
                            tagNo = 1;
                            $(this).addClass('activefocus')
                             scrollText($('.activefocus')[0])
                        }else{
                            // TODO 
                            tagNo = 1;
                            // console.log($(this).parent(),'parent')
                            // $(this).addClass('activefocus')
                            // console.log('tagName元素既不是Li也不是div')
                            // console.log($(this).parent()[0],'parent',$(this),'--item',item)
                            // console.log(e.target,$(e.target).parents('li').index())
                            // console.log(e.target,$(e.target).parent().index())
                            if($(e.target).parent().index() == '-1'){
                                // console.log('return')
                                $('.activefocus').removeClass('activefocus')
                            }
                            // break;
                            return;
                        }
                        
                        // 打开模态框
                        $('.table-itemSelsbox').hide();
                        var nowShowTag = '当前区域 '+item+'-'+tagNo+' 的数据详情';
                        $('.nowAreaDetail .ibox-title h5').text(nowShowTag)

                        if(e.target.className.indexOf('uploadPicBtn')>0){
                            // console.log(nowAreaPos)
                            $('#impic_upload').click();
                            return false;
                        }
                        var pageTagFlag = false;
                        $.each(nowPageAreaInfo,function(nowAreaIndex,nowAreaItem){
                            // 有数据
                            if(nowAreaItem.id == item && nowAreaItem.tagNo == tagNo){
                                pageTagFlag = true;
                                
                                // $('.nowAreaDetail').show();

                                fillDetailTable(nowAreaItem.data);
                                if(!nowAreaItem.data){
                                    $('.nowAreaDetail').hide();
                                     $('.table-itemSelsbox').hide();
                                     $('#myModal').modal('show');
                                }
                            }
                        })
                     
                    });
                   
                });

                //数据表格渲染
                // tableArea_livebox 直播媒资
                liveTable = $('#table_live').DataTable({
                    // 服务器端渲染
                    "serverSide": true,
                    // 请求数据的形式(get, post), 请求的路径
                    ajax: {
                        // 数据的url
                        url: "/template_type/data/lives",
                        type: "POST",
                        data: function (d) {
                            // 归类
                            d.vcat = $('#table-live-search1').val();

                            // 分类
                            d.vcattag = $('#table-live-search2').val();

                            // 搜索框
                            d.search_value = $('#table-live-search-inp').val();

                        },
                    },
                    columns: [
                        {
                            orderable: false,
                            data: "id",
                            title: '选择',
                            render:function(id){
                            return '<input type="radio" data-id="' + id + '" name="checkbox-live">'
                            },
                            width:"*"
                        },
                        {
                            // 列名
                            title: "排序",
                            // 数据
                            data: null,
                            // 能否进行排序
                            orderable: true,
                            width: "*"
                        },
                        {
                            // 列名
                            title: "编号",
                            // 数据
                            data: "id",
                            // 能否进行排序
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "名称",
                            data: "name",
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "标题",
                            data: "title",
                            orderable:true,
                            width: "*"
                        },
                    ],

                    // 分页类型
                    "pagingType":   "full_numbers",
                    "sLoadingRecords": "正在加载数据...",
                    "sZeroRecords": "暂无数据",
                    // 能否进行搜索
                    "searching": true,
                    "order": [[ 1, "asc" ]],
                    "dom": 'rt<"bottom"ilp<"clear">>',
                    "language": {
                        "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ 项结果",
                        "zeroRecords": "没有匹配结果",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "url": "",
                        "paginate": {
                            "first":    "首页",
                            "previous": "上一页",
                            "next":     "下一页",
                            "last":     "末页"
                        }
                    },
                    fnDrawCallback: function() {
                    　　var api = this.api();
                    　　api.column(1).nodes().each(function(cell, i) {
                    　　　　cell.innerHTML =  i + 1;
                    　　});
                    },
                    _fnPageChange:function(){
                    }
                });
                // tableArea_pointplay 点播
                pointTable = $('#table_point').DataTable({
                    // "processing": true,
                    // 服务器端渲染
                    "serverSide": true,
                    // 请求数据的形式(get, post), 请求的路径
                    ajax: {
                        // 数据的url
                        url: "/template_type/data/points",
                        type: "POST",
                        data: function (d) {
                            // 归类
                            d.vcat = $('#table-point-search1').val();

                            // 分类
                            d.vcattag = $('#table-point-search2').val();

                            // 搜索框
                            d.search_value = $('#table-point-search-inp').val();

                            /*// 专辑id
                            d.album_id = $('#album_id').val();*/
                        },
                    },
                    // data:nowDataArr,
                    columns: [
                        {
                            orderable: false,
                            data: "id",
                            title: '选择',
                            render:function(id){
                              return '<input type="radio" data-id="' + id + '" name="checkbox-point">'
                            },
                            width:"*"
                          },
                         {
                             // 列名
                             title: "排序",
                             // 数据
                             data: null,
                             // 能否进行排序
                             orderable: true,
                             width: "*"
                         },
                        {
                            // 列名
                            title: "编号",
                            // 数据
                            data: "id",
                            // 能否进行排序
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "名称",
                            data: "name",
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "标题",
                            data: "title",
                            orderable:true,
                            width: "*"
                        },
                    ],

                    // 分页类型
                    "pagingType":   "full_numbers",
                    "sLoadingRecords": "正在加载数据...",
                    "sZeroRecords": "暂无数据",
                    // 能否进行搜索
                    "searching": true,
                    "order": [[ 1, "asc" ]],
                    "dom": 'rt<"bottom"ilp<"clear">>',
                    "language": {
                         "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ 项结果",
                        "zeroRecords": "没有匹配结果",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "url": "",
                        "paginate": {
                            "first":    "首页",
                            "previous": "上一页",
                            "next":     "下一页",
                            "last":     "末页"
                        }
                   },
                   fnDrawCallback: function() {
                   　　var api = this.api();
                   　　api.column(1).nodes().each(function(cell, i) {
                   　　　　cell.innerHTML =  i + 1;
                   　　});
                   },
                   _fnPageChange:function(){
                   }
                });

                // tableArea_subject 专题媒资
                subjectTable = $('#table_subject').DataTable({
                    // "processing": true,
                    // 服务器端渲染
                    "serverSide": true,
                    // 请求数据的形式(get, post), 请求的路径
                    ajax: {
                        // 数据的url
                        url: "/template_type/data/subjects",
                        type: "POST",
                    },
                    columns: [
                        {
                            orderable: false,
                            data: "id",
                            title: '选择',
                            render:function(id){
                              return '<input type="radio" data-id="' + id + '" name="checkbox-subject">'
                            },
                            width:"*"
                          },
                        {
                            // 列名
                            title: "排序",
                            // 数据
                            data: null,
                            // 能否进行排序
                            orderable: true,
                            width: "*"
                        },
                        {
                            // 列名
                            title: "编号",
                            // 数据
                            data: "id",
                            // 能否进行排序
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "名称",
                            data: "name",
                            orderable:true,
                            width: "*"
                        },
                        {
                            title: "标题",
                            data: "title",
                            orderable:true,
                            width: "*"
                        },
                    ],

                    // 分页类型
                    "pagingType":   "full_numbers",
                    "sLoadingRecords": "正在加载数据...",
                    "sZeroRecords": "暂无数据",
                    // 能否进行搜索
                    "searching": true,
                    "order": [[ 1, "asc" ]],
                    "dom": 'rt<"bottom"ilp<"clear">>',
                    "language": {
                        "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ 项结果",
                        "zeroRecords": "没有匹配结果",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "url": "",
                        "paginate": {
                            "first":    "首页",
                            "previous": "上一页",
                            "next":     "下一页",
                            "last":     "末页"
                        }
                    },
                    fnDrawCallback: function() {
                    　　var api = this.api();
                    　　api.column(1).nodes().each(function(cell, i) {
                    　　　　cell.innerHTML =  i + 1;
                    　　});
                    },
                    _fnPageChange:function(){
                    }
                });
                
                collistTable = $('#table_collist').DataTable({
                    // "processing": true,
                    // 服务器端渲染
                    "serverSide": true,
                    // 请求数据的形式(get, post), 请求的路径
                    
                    "ajax": {
                        // 数据的url
                        url: "/template_type/data/collists",
                        type: "POST",
                        data: function (d) {
                            // 归类-1为点播
                            d.collist = "1";

                            // 分类
                            // d.vcattag = $('#table-collist-search2').val();

                            // 搜索框
                            d.search_value = $('#table-collist-search-inp').val();

                            /*// 专辑id
                            d.album_id = $('#album_id').val();*/
                        },
                    },
                    "columns": [
                        {
                            orderable: false,
                            data: "cols.id",
                            title: '选择',
                            render:function(id){
                              return '<input type="radio" data-id="' + id + '" name="checkbox-collist">'
                            },
                            width:"*"
                          },
                        {
                            // 列名
                            title: "排序",
                            // 数据
                            data: null,
                            // 能否进行排序
                            orderable: true,
                            width: "*"
                        },
                        {
                            title: "栏目编号",
                            // 数据
                            data: 'cols.id',
                            // 能否进行排序
                            orderable:true,
                            width: "*",
                        },
                        {
                            title: "栏目名称",
                            // 数据
                            data: 'cols.name',
                            // 能否进行排序
                            orderable:true,
                            width: "*",
                        },
                        {
                            title: "栏目标题",
                            // 数据
                            data: 'cols.title',
                            // 能否进行排序
                            orderable:true,
                            width: "*",
                        },
                        {
                            title: "栏目列表编号",
                            // 数据
                            data: 'collist.id',
                            visible: false,
                            // 能否进行排序
                            orderable:false,
                            width: "*",

                        },
                        {
                            title: "栏目列表名称",
                            // 数据
                            data: 'collist.name',
                            visible: false,
                            // 能否进行排序
                            orderable:false,
                            width: "*",
                        },
                        {
                            title: "栏目列表标题",
                            // 数据
                            data: 'collist.title',
                            visible: false,
                            // 能否进行排序
                            orderable:false,
                            width: "*",
                        },
                        {
                            title: "栏目列表名称",
                            // 数据
                            data: 'collist',
                            // visible: true,
                            // 能否进行排序
                            render:function(data){
                                return '<span data-collistId='+data.id+'>'+data.name+'</span>'
                            },
                            orderable:false,
                            width: "*",
                        },
                        
                    ],

                    // 分页类型
                    "pagingType":   "full_numbers",
                    "sLoadingRecords": "正在加载数据...",
                    "sZeroRecords": "暂无数据",
                    // 能否进行搜索
                    "searching": false,
                    // "searching": true,
                    "order": [[ 1, "asc" ]],
                    "dom": 'rt<"bottom"ilp<"clear">>',
                    "language": {
                        "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ 项结果",
                        "zeroRecords": "没有匹配结果",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "url": "",
                        "paginate": {
                            "first":    "首页",
                            "previous": "上一页",
                            "next":     "下一页",
                            "last":     "末页"
                        }
                    },
                    fnDrawCallback: function(){
                    　　var api = this.api();
                    　　api.column(1).nodes().each(function(cell, i) {
                    　　　　cell.innerHTML =  i + 1;
                    　　});
                    },
                    _fnPageChange:function(){
                    }
                });

                // 详情
                var detailTable = $('#table_detail').DataTable({
                    "columns":[
                        {
                            // 列名
                            title: "序号",
                            // 数据
                            data: null,
                            // 能否进行排序
                            orderable: true,
                            width: "*"
                        },
                        {
                            title:"数据类型",
                            data:null,
                            orderable:false,
                            width:"*"
                        },
                        {
                            title:"名称",
                            data:null,
                            orderable:false,
                            width:"*"
                        },{
                            title:"标题",
                            data:null,
                            orderable:false,
                            width:"*"
                        },
                        {
                            title:"操作",
                            data:null,
                            orderable:false,
                            render:function(){
                                return '<i class="glyphicon glyphicon-trash"></i>'
                            },
                            width:"*"
                        }
                    ],
                    // "pagingType":   "full_numbers",
                    "sLoadingRecords": "正在加载数据...",
                    "searching": false,
                    "dom": '',
                    "language": {
                         "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ 项结果",
                        "zeroRecords": "没有匹配结果",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "url": "",
                        "paginate": {
                            "first":    "首页",
                            "previous": "上一页",
                            "next":     "下一页",
                            "last":     "末页"
                        }
                    }
                });

                //使用col插件实现表格头宽度拖拽
                $("#table_subjectbox .table").colResizable();
                $("#table_collistbox .table").colResizable();
                $("#table_livebox .table").colResizable();

                $("#table_subjectbox").hide();
                $("#table_collistbox").hide();
                $("#table_livebox").hide();

                
                // 图片上传
                $("#impic_upload").change(function () {
                    if(!nowAreaPos)return;
                    var shortJson = {
                        template_type : window.OPTIONS[nowAreaPos].areaType,
                        template_no : window.OPTIONS[nowAreaPos].areaId,
                        area_no : nowAreaPos,
                        template_details_id:TemplateDetailsId,
                        tag_no:tagNo,
                        // img:new FormData($('#uploadForm')[0])
                    }
                    // console.log(shortJson)
                    $("#chat_form").ajaxSubmit({
                    type: 'post',  //请求类型
                    url: '/operation/content_templates/area/upload_img',  //该php中可接收$_FILES数组
                    data:shortJson,
                    beforeSubmit: function () {
                    //提交前的操作
                        // $('input[name=template_type]').value(window.OPTIONS[nowAreaPos].areaType);
                        // $('input[template_details_id]').value(TemplateDetailsId)
                    },
                    success: function (data) {
                    //操作成功后
                        // $("#image").val(data.imgsrc);
                        // console.log(data)
                        layer.msg(data.content);
                        $('#'+nowAreaPos).find('img').eq(tagNo-1).attr({"src":data.path})
                    },
                    resetForm: true, //操作完成后是否重置表单
                    dataType:  'json' //返回数据格式
                    });
                });
            });
            $('.shandowMark').hide();
        </script>
        <script type="text/javascript" src="{{ asset("/custom-templates/js/comm_interaction.js") }}"></script>

    </body>
</html>
